import React, { Component, Fragment } from 'react';
import { Form } from '@ant-design/compatible';

import {
    Card, Row, Col, InputNumber,
} from 'antd';

import '@ant-design/compatible/assets/index.css';

const { Item } = Form;
interface DiscountSettingProps {
    getFieldDecorator: any;
    detailInfo: any;
    maxCents: any;
    maxPercentage: any;
}

class DiscountSettingElem extends Component<DiscountSettingProps> {
    renderAvoidClose = (getFieldDecorator: any, detailInfo: any, maxPercentage: any) => (
        <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
            <Col
                md={8}
                sm={24}
                style={{ display: 'flex' }}
            >
                <Item
                    label="免密支付折扣"
                    colon={false}
                    style={{ flex: 1 }}
                >
                    {getFieldDecorator('cabFreePayDiscount', ({
                        initialValue: detailInfo.cabFreePayDiscount,
                        rules: [{ required: true, message: '请输入免费时间' }],
                    }))(
                        <InputNumber
                            min={0}
                            max={maxPercentage}
                            step={1}
                            placeholder="请输入"
                            style={{ width: '100%' }}
                        />,
                    )}
                </Item>
                <span className="marginL8" style={{ lineHeight: '32px' }}>%</span>
            </Col>
        </Row>
    )

    render() {
        const { getFieldDecorator, detailInfo, maxCents, maxPercentage } = this.props;

        return (
            <Fragment>
                <Card title="折扣配置" bordered={false}>
                    <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                        <Col md={8} sm={24}>
                            <Row gutter={{ md: 8, xl: 24, lg: 48 }}>

                                <Col span={24}>
                                    <div className="subtitle marginB10">用户取件折扣</div>
                                </Col>
                                <Col span={24} style={{ display: 'flex' }}>
                                    <Item
                                        label="APP取件折扣"
                                        colon={false}
                                        style={{ flex: 1 }}
                                    >
                                        {getFieldDecorator('appPickupDiscount', ({
                                            initialValue: detailInfo.appPickupDiscount,
                                            rules: [{ required: true, message: '请输入免费时间' }],
                                        }))(
                                            <InputNumber
                                                min={0}
                                                max={maxPercentage}
                                                step={1}
                                                placeholder="请输入"
                                                style={{ width: '100%' }}
                                            />,
                                        )}
                                    </Item>
                                    <span className="marginL8" style={{ lineHeight: '32px' }}>%</span>
                                </Col>
                                <Col span={24} style={{ display: 'flex' }}>
                                    <Item
                                        label="柜体取件折扣"
                                        colon={false}
                                        style={{ flex: 1 }}
                                    >
                                        {getFieldDecorator('cabPickupDiscount', ({
                                            initialValue: detailInfo.cabPickupDiscount,
                                            rules: [{ required: true, message: '请输入免费时间' }],
                                        }))(
                                            <InputNumber
                                                min={0}
                                                max={maxPercentage}
                                                step={1}
                                                placeholder="请输入"
                                                style={{ width: '100%' }}
                                            />,
                                        )}
                                    </Item>
                                    <span className="marginL8" style={{ lineHeight: '32px' }}>%</span>
                                </Col>
                                <Col span={24} style={{ display: 'flex' }}>
                                    <Item
                                        label="码枪取件折扣"
                                        colon={false}
                                        style={{ flex: 1 }}
                                    >
                                        {getFieldDecorator('scanPickupDiscount', ({
                                            initialValue: detailInfo.scanPickupDiscount,
                                            rules: [{ required: true, message: '请输入免费时间' }],
                                        }))(
                                            <InputNumber
                                                min={0}
                                                max={maxPercentage}
                                                step={1}
                                                placeholder="请输入"
                                                style={{ width: '100%' }}
                                            />,
                                        )}
                                    </Item>
                                    <span className="marginL8" style={{ lineHeight: '32px' }}>%</span>
                                </Col>
                                <Col span={24} style={{ display: 'flex' }}>
                                    <Item
                                        label="后台取件折扣"
                                        colon={false}
                                        style={{ flex: 1 }}
                                    >
                                        {getFieldDecorator('innerPickupDiscount', ({
                                            initialValue: detailInfo.innerPickupDiscount,
                                            rules: [{ required: true, message: '请输入免费时间' }],
                                        }))(
                                            <InputNumber
                                                min={0}
                                                max={maxPercentage}
                                                step={1}
                                                placeholder="请输入"
                                                style={{ width: '100%' }}
                                            />,
                                        )}
                                    </Item>
                                    <span className="marginL8" style={{ lineHeight: '32px' }}>%</span>
                                </Col>
                            </Row>
                        </Col>

                        <Col md={8} sm={24}>
                            <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                                <Col span={24}>
                                    <div className="subtitle marginB10">投递人投递折扣</div>
                                </Col>
                                <Col span={24} style={{ display: 'flex' }}>
                                    <Item
                                        label="柜体投递收费折扣"
                                        colon={false}
                                        style={{ flex: 1 }}
                                    >
                                        {getFieldDecorator('cabDeliveryDiscount', ({
                                            initialValue: detailInfo.cabDeliveryDiscount,
                                            rules: [{ required: true, message: '请输入免费时间' }],
                                        }))(
                                            <InputNumber
                                                min={0}
                                                max={maxPercentage}
                                                step={1}
                                                placeholder="请输入"
                                                style={{ width: '100%' }}
                                            />,
                                        )}
                                    </Item>
                                    <span className="marginL8" style={{ lineHeight: '32px' }}>%</span>
                                </Col>
                                <Col span={24} style={{ display: 'flex' }}>
                                    <Item
                                        label="APP投递收费折扣"
                                        colon={false}
                                        style={{ flex: 1 }}
                                    >
                                        {getFieldDecorator('appDeliveryDiscount', ({
                                            initialValue: detailInfo.appDeliveryDiscount,
                                            rules: [{ required: true, message: '请输入免费时间' }],
                                        }))(
                                            <InputNumber
                                                min={0}
                                                max={maxPercentage}
                                                step={1}
                                                placeholder="请输入"
                                                style={{ width: '100%' }}
                                            />,
                                        )}
                                    </Item>
                                    <span className="marginL8" style={{ lineHeight: '32px' }}>%</span>
                                </Col>
                            </Row>
                        </Col>

                        <Col md={8} sm={24}>
                            <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                                <Col span={24}>
                                    <div className="subtitle marginB10">投递人取回折扣</div>
                                </Col>
                                <Col span={24} style={{ display: 'flex' }}>
                                    <Item
                                        label="柜体取回收费折扣"
                                        colon={false}
                                        style={{ flex: 1 }}
                                    >
                                        {getFieldDecorator('cabRetrieveDiscount', ({
                                            initialValue: detailInfo.cabRetrieveDiscount,
                                            rules: [{ required: true, message: '请输入免费时间' }],
                                        }))(
                                            <InputNumber
                                                min={0}
                                                max={maxPercentage}
                                                step={1}
                                                placeholder="请输入"
                                                style={{ width: '100%' }}
                                            />,
                                        )}
                                    </Item>
                                    <span className="marginL8" style={{ lineHeight: '32px' }}>%</span>
                                </Col>
                                <Col span={24} style={{ display: 'flex' }}>
                                    <Item
                                        label="APP取回收费折扣"
                                        colon={false}
                                        style={{ flex: 1 }}
                                    >
                                        {getFieldDecorator('appRetrieveDiscount', ({
                                            initialValue: detailInfo.appRetrieveDiscount,
                                            rules: [{ required: true, message: '请输入免费时间' }],
                                        }))(
                                            <InputNumber
                                                min={0}
                                                max={maxPercentage}
                                                step={1}
                                                placeholder="请输入"
                                                style={{ width: '100%' }}
                                            />,
                                        )}
                                    </Item>
                                    <span className="marginL8" style={{ lineHeight: '32px' }}>%</span>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                </Card>

                <Card bordered={false} title="免密支付折扣" className="paddingB20">
                    {this.renderAvoidClose(getFieldDecorator, detailInfo, maxPercentage)}
                </Card>
            </Fragment>
        );
    }
}

export default DiscountSettingElem;
